@tailwind base;
@tailwind components;
@tailwind utilities;

/* 页面过渡样式 */
#__next {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* 页面切换时的效果 */
.page-transitioning main {
  opacity: 0.7;
}

.page-transitioning footer {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* 页面切换时防止布局跳动 */
main {
  flex: 1;
  display: flex;
  flex-direction: column;
  transition: opacity 0.2s ease;
}

/* 防止footer闪烁 */
footer {
  transition: all 0.3s ease;
  will-change: transform, opacity;
}

/* 自定义样式 */
.markdown-editor {
  @apply bg-white rounded-lg;
}

.markdown-editor .rc-md-editor {
  @apply border border-gray-200 rounded-lg;
  min-height: 500px;
}

/* 为大型文档优化的编辑器样式 */
.optimized-markdown-editor {
  contain: content; /* CSS containment，提高渲染性能 */
  font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
  font-size: 14px;
  line-height: 1.5;
  tab-size: 2;
  will-change: transform; /* 优化滚动性能 */
}

/* 为大型文档优化的预览样式 */
.optimized-html-preview {
  contain: content; /* CSS containment，提高渲染性能 */
  font-size: 14px;
  line-height: 1.5;
  will-change: transform; /* 优化滚动性能 */
  /* 使用GPU加速滚动 */
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-perspective: 1000;
  perspective: 1000;
  overscroll-behavior: contain; /* 防止过度滚动影响性能 */
}

/* 优化编辑器和预览区域的滚动性能 */
.rc-md-editor .editor-container .sec-md .input {
  overscroll-behavior: contain; /* 防止过度滚动影响性能 */
  /* 使用GPU加速滚动 */
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-perspective: 1000;
  perspective: 1000;
}

.markdown-editor .rc-md-navigation {
  @apply bg-gray-50 border-b border-gray-200;
}

.markdown-editor .rc-md-navigation .button {
  @apply text-gray-600 hover:text-blue-600 hover:bg-gray-100;
}

.markdown-editor .rc-md-navigation .button.active {
  @apply text-blue-600 bg-gray-100;
}

.markdown-editor .section-container {
  @apply border-0;
}

.markdown-editor .custom-html-style {
  @apply p-4;
}

.markdown-editor .rc-md-editor .rc-md-input {
  @apply font-mono text-base leading-relaxed;
}

.markdown-editor .rc-md-editor .rc-md-preview {
  @apply p-4;
}

/* 编辑器全屏模式 */
.markdown-editor .rc-md-editor.full {
  @apply fixed inset-0 z-50;
}

/* 编辑器工具栏 */
.markdown-editor .toolbar {
  @apply border-b border-gray-200 bg-gray-50;
}

.markdown-editor .toolbar .toolbar-item {
  @apply text-gray-600 hover:text-blue-600 hover:bg-gray-100;
}

.markdown-editor .toolbar .toolbar-item.active {
  @apply text-blue-600 bg-gray-100;
}

/* 编辑器滚动条样式 */
.markdown-editor .rc-md-editor .rc-md-input,
.markdown-editor .rc-md-editor .rc-md-preview {
  scrollbar-width: thin;
  scrollbar-color: theme('colors.gray.300') theme('colors.gray.100');
}

.markdown-editor .rc-md-editor .rc-md-input::-webkit-scrollbar,
.markdown-editor .rc-md-editor .rc-md-preview::-webkit-scrollbar {
  @apply w-2;
}

.markdown-editor .rc-md-editor .rc-md-input::-webkit-scrollbar-track,
.markdown-editor .rc-md-editor .rc-md-preview::-webkit-scrollbar-track {
  @apply bg-gray-100;
}

.markdown-editor .rc-md-editor .rc-md-input::-webkit-scrollbar-thumb,
.markdown-editor .rc-md-editor .rc-md-preview::-webkit-scrollbar-thumb {
  @apply bg-gray-300 rounded-full hover:bg-gray-400;
}

/* 移除直接定义的 prose 样式，改用 Tailwind typography */
@layer base {
  .prose {
    @apply text-base sm:text-lg;
  }
  
  .prose h1 {
    @apply text-2xl sm:text-3xl font-bold mt-8 mb-6;
  }

  .prose h2 {
    @apply text-xl sm:text-2xl font-semibold mt-6 mb-4;
  }

  .prose h3 {
    @apply text-lg sm:text-xl font-semibold mt-4 mb-3;
  }

  .prose p {
    @apply text-base sm:text-lg mb-6 leading-relaxed;
  }

  .prose ul, .prose ol {
    @apply mb-6 text-base sm:text-lg;
  }

  .prose li {
    @apply mb-2 leading-relaxed;
  }

  .prose code {
    @apply text-sm sm:text-base px-2 py-1;
  }

  .prose pre {
    @apply text-sm sm:text-base p-4 my-6;
  }

  /* 确保亮色模式下链接使用默认颜色 */
  .prose a {
    color: unset !important;
  }
  
  /* 暗色模式下的链接颜色 */
  .dark .prose a {
    color: #60a5fa !important;
  }
  
  /* 亮色模式下的悬停效果 */
  .prose a:hover {
    color: #2563eb !important;
  }
  
  /* 暗色模式下不改变链接悬停颜色 - 使用更强的选择器 */
  html.dark .prose a:hover,
  .dark .prose a:hover,
  body.dark .prose a:hover {
    color: #60a5fa !important;
    text-decoration: underline;
  }

  /* 支持HTML字体颜色和链接嵌套 */
  .prose span[style] a,
  .prose a span[style] {
    color: inherit !important;
  }

  /* 仅在亮色模式下应用悬停亮度变化 */
  .prose span[style] a:hover,
  .prose a:hover span[style] {
    filter: brightness(1.2);
  }

  /* 暗色模式下不应用悬停亮度变化 - 使用更强的选择器 */
  html.dark .prose span[style] a:hover,
  html.dark .prose a:hover span[style],
  .dark .prose span[style] a:hover,
  .dark .prose a:hover span[style],
  body.dark .prose span[style] a:hover,
  body.dark .prose a:hover span[style] {
    filter: none !important;
    text-decoration: underline !important;
  }

  /* 最高优先级的全局覆盖 - 确保暗色模式下链接悬停不变色 */
  .dark *:where(a:hover) {
    color: inherit !important;
  }
}

/* 滚动条样式 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  @apply bg-gray-100;
}

::-webkit-scrollbar-thumb {
  @apply bg-gray-300 rounded-full;
}

::-webkit-scrollbar-thumb:hover {
  @apply bg-gray-400;
}

/* 编辑器内容区域样式 */
.CodeMirror {
  @apply font-mono text-base leading-relaxed;
}

.CodeMirror-scroll {
  @apply min-h-[500px];
}

/* 编辑器预览区域样式 */
.editor-preview {
  @apply p-4;
}

.editor-preview-side {
  @apply border-l border-gray-200;
}

/* 编辑器内容区域样式 */
.CodeMirror-wrap {
  @apply border-0;
}

.CodeMirror-lines {
  @apply p-4;
}

.CodeMirror-line {
  @apply leading-relaxed;
}

/* 编辑器预览区域样式 */
.editor-preview-side {
  @apply border-l border-gray-200;
}

.editor-preview-side .editor-preview {
  @apply p-4;
}

/* 编辑器全屏模式样式 */
.editor-toolbar.fullscreen {
  @apply fixed top-0 left-0 right-0 z-50;
}

.editor-toolbar.fullscreen + .CodeMirror {
  @apply fixed top-16 left-0 right-0 bottom-0 z-40;
}

/* 引用块样式 */
.prose blockquote {
  @apply border-l-4 border-gray-400 dark:border-gray-600 pl-4 my-4 italic py-3 px-4 rounded-tr-md rounded-br-md bg-gray-100 dark:bg-[rgb(38,41,48)] text-gray-700 dark:text-gray-300;
}

/* 嵌套引用样式 - 第二级 */
.prose blockquote blockquote {
  @apply border-l-4 border-gray-500 dark:border-gray-500 bg-gray-200 dark:bg-[rgb(45,48,55)];
}

/* 嵌套引用样式 - 第三级及以上 */
.prose blockquote blockquote blockquote {
  @apply border-l-4 border-gray-600 dark:border-gray-400 bg-gray-300 dark:bg-[rgb(52,55,62)];
}

/* ===== 最终覆盖规则 - 确保暗色模式下链接悬停不变色 ===== */
.dark .prose a,
html.dark .prose a,
body.dark .prose a {
  color: #60a5fa !important; /* blue-400 */
}

.dark .prose a:hover,
html.dark .prose a:hover,
body.dark .prose a:hover {
  color: #60a5fa !important; /* 保持相同颜色 */
  text-decoration: underline;
}

/* 彩色链接处理 */
.prose span[style] a,
.prose a span[style] {
  color: inherit !important;
}

/* 暗色模式下彩色链接悬停 */
.dark .prose span[style] a:hover,
.dark .prose a:hover span[style],
html.dark .prose span[style] a:hover,
html.dark .prose a:hover span[style],
body.dark .prose span[style] a:hover,
body.dark .prose a:hover span[style] {
  color: inherit !important;
  filter: none !important;
  text-decoration: underline !important;
} 